import React from 'react';
import { useResponsive } from '../hooks/use-responsive';
import { pxToVw, pxToVh, responsiveStyles, responsiveValue, getSafeAreaStyles } from '../utils/responsive';
import classNames from 'classnames';

interface ResponsiveContainerProps {
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  padding?: boolean;
  safeArea?: boolean;
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
}

/**
 * 响应式容器组件
 * 自动适配不同设备尺寸，支持安全区域
 */
export const ResponsiveContainer: React.FC<ResponsiveContainerProps> = ({
  children,
  className,
  style,
  padding = true,
  safeArea = true,
  maxWidth = 'full',
}) => {
  const { deviceType, isMobile } = useResponsive();

  // 响应式样式
  const responsiveStyle = responsiveStyles({
    default: {
      width: '100%',
      margin: '0 auto',
    },
    mobile: {
      padding: padding ? pxToVw(16) : '0',
      minHeight: pxToVh(100),
    },
    tablet: {
      padding: padding ? pxToVw(24) : '0',
      maxWidth: '768px',
    },
    desktop: {
      padding: padding ? pxToVw(32) : '0',
      maxWidth: maxWidth === 'full' ? '100%' : `${maxWidth === 'sm' ? '640' : maxWidth === 'md' ? '768' : maxWidth === 'lg' ? '1024' : maxWidth === 'xl' ? '1280' : '1536'}px`,
    },
  });

  // 安全区域样式
  const safeAreaStyle = safeArea ? getSafeAreaStyles(['top', 'bottom']) : {};

  const containerClass = classNames(
    'responsive-container',
    {
      'mobile': isMobile,
      'tablet': deviceType === 'tablet',
      'desktop': deviceType === 'desktop',
    },
    className
  );

  return (
    <div
      className={containerClass}
      style={{
        ...responsiveStyle,
        ...safeAreaStyle,
        ...style,
      }}
    >
      {children}
    </div>
  );
};

/**
 * 响应式网格组件
 */
interface ResponsiveGridProps {
  children: React.ReactNode;
  cols?: {
    mobile?: number;
    tablet?: number;
    desktop?: number;
  };
  gap?: {
    mobile?: number;
    tablet?: number;
    desktop?: number;
  };
  className?: string;
}

export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
  children,
  cols = { mobile: 1, tablet: 2, desktop: 3 },
  gap = { mobile: 16, tablet: 24, desktop: 32 },
  className,
}) => {
  const { deviceType } = useResponsive();

  const gridCols = responsiveValue({
    mobile: cols.mobile,
    tablet: cols.tablet,
    desktop: cols.desktop,
    default: 1,
  });

  const gridGap = responsiveValue({
    mobile: gap.mobile,
    tablet: gap.tablet,
    desktop: gap.desktop,
    default: 16,
  });

  const gridStyle = {
    display: 'grid',
    gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
    gap: pxToVw(gridGap || 16),
  };

  return (
    <div className={className} style={gridStyle}>
      {children}
    </div>
  );
};

/**
 * 响应式文本组件
 */
interface ResponsiveTextProps {
  children: React.ReactNode;
  size?: {
    mobile?: string;
    tablet?: string;
    desktop?: string;
  };
  className?: string;
}

export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
  children,
  size = { mobile: 'sm', tablet: 'base', desktop: 'lg' },
  className,
}) => {
  const textSize = responsiveValue({
    mobile: size.mobile,
    tablet: size.tablet,
    desktop: size.desktop,
    default: 'base',
  });

  const textClass = classNames(
    `text-${textSize}`,
    className
  );

  return (
    <div className={textClass}>
      {children}
    </div>
  );
};

/**
 * 响应式间距组件
 */
interface ResponsiveSpacerProps {
  size?: {
    mobile?: number;
    tablet?: number;
    desktop?: number;
  };
  direction?: 'horizontal' | 'vertical';
  className?: string;
}

export const ResponsiveSpacer: React.FC<ResponsiveSpacerProps> = ({
  size = { mobile: 16, tablet: 24, desktop: 32 },
  direction = 'vertical',
  className,
}) => {
  const spacerSize = responsiveValue({
    mobile: size.mobile,
    tablet: size.tablet,
    desktop: size.desktop,
    default: 16,
  });

  const spacerStyle = {
    [direction === 'vertical' ? 'height' : 'width']: pxToVw(spacerSize || 16),
  };

  return (
    <div className={className} style={spacerStyle} />
  );
}; 